<template>
  <div class="container">
    <n-form
      ref="formRef"
      :label-width="80"
      :model="formValue"
      :rules="rules"
      :size="small"
      label-placement="left"
      label-width="auto"
      label-align="left"
    >
      <div class="head">
        <div class="head-title">
          <div class="title-text">个人简历</div>
        </div>

        <div class="head-content">
          <div class="img">
            <img src="../../../assets/imgs/resume/avatar.jpg" alt="" />
          </div>

          <div class="info">
            <div class="info-top">
              <svg-icon name="name"></svg-icon>

              <div class="name">
                <n-form-item label="姓 名 :" path="user.name" size="small">
                  <n-input
                    v-model:value="formValue.user.name"
                    placeholder="输入姓名"
                  />
                </n-form-item>
              </div>
            </div>
            <div class="info-down">
              <svg-icon name="age"></svg-icon>
              <div class="age">
                <n-form-item label="年 龄 :" path="user.age" size="small">
                  <n-input
                    v-model:value="formValue.user.age"
                    placeholder="输入年龄"
                  />
                </n-form-item>
              </div>
              <svg-icon name="phone"></svg-icon>
              <div class="phone">
                <n-form-item label="电 话 :" path="user.phone" size="small">
                  <n-input
                    v-model:value="formValue.user.phone"
                    placeholder="电话号码"
                  />
                </n-form-item>
              </div>
              <svg-icon name="mail"></svg-icon>

              <div class="mail">
                <n-form-item label="邮 箱 :" path="user.mail" size="small">
                  <n-input
                    v-model:value="formValue.user.email"
                    placeholder="邮箱"
                  />
                </n-form-item>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>教育经历
          </div>
          <n-form-item path="user.education">
            <n-input
              v-model:value="formValue.user.educational_experience"
              type="textarea"
              placeholder="教育经历"
            />
          </n-form-item>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>专业技能
          </div>
          <n-form-item path="user.professionalAbility">
            <n-input
              v-model:value="formValue.user.skill"
              type="textarea"
              placeholder="专业技能"
            />
          </n-form-item>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>项目经历
          </div>
          <n-form-item size="small" path="user.projectExperience">
            <n-input
              v-model:value="formValue.user.project_experience"
              type="textarea"
              placeholder="项目经历"
            />
          </n-form-item>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>职位薪水
          </div>
          <n-form-item size="small" path="user.positionSalary">
            <n-input
              v-model:value="formValue.user.dream_position"
              type="textarea"
              placeholder="职位和薪水"
            />
          </n-form-item>
        </div>
        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>薪水
          </div>
          <n-form-item size="small" path="user.positionSalary">
            <n-input
              v-model:value="formValue.user.dream_salary"
              type="textarea"
              placeholder="职位和薪水"
            />
          </n-form-item>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>自我评价
          </div>
          <n-form-item size="small" path="user.personalSummary">
            <n-input
              v-model:value="formValue.user.self_evaluation"
              type="textarea"
              placeholder="自我评价"
            />
          </n-form-item>
        </div>

        <div class="btn">
          <n-button type="primary" @click="generateResume"> 生成简历 </n-button>
        </div>
      </div>
    </n-form>
  </div>
</template>

<script>
import {
  getStudentInfo,
  getStudentPicture,
  editStudentInfo,
} from "@/http/api/student"
export default {
  data() {
    return {
      index: "",
      formValue: {
        user: {
          id: "",
          name: "",
          age: "",
          phone: "",
          email: "",
          educational_experience: "",
          dream_position: "",
          project_experience: "",
          dream_salary: "",
          self_evaluation: "",
          skill: "",
        },
      },
    }
  },
  methods: {
    generateResume() {
      this.editInfo()
      window.$message.success("编辑成功")
      this.$router.push({
        path: "/resume-guidance/resume-preview-two",
      })
    },
    getInfo() {
      getStudentInfo()
        .then((result) => {
          // console.log(result.result[0])
          this.formValue.user = result.result[0]
        })
        .catch((err) => {
          console.log(err)
        })
    },
    editInfo() {
      editStudentInfo(this.formValue.user)
        .then((result) => {
          console.log(result)
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted() {
    this.index = this.$route.params.index
    this.getInfo()
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 80%;
  margin: 0 auto;
  .head {
    height: 25px;
    background-color: cadetblue;
    display: flex;
    position: relative;
    .head-title {
      position: absolute;
      right: 25px;
      width: 100px;
      height: 100%;
      background-color: #d8bfd8;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .head-content {
      margin-top: 30px;
      width: 100%;
      height: 150px;
      display: flex;
      align-items: center;
      .img {
        flex: 0 0 10px;
        img {
          width: 100px;
          height: 125px;
        }
      }

      .info {
        flex: 1;
        margin-left: 30px;

        .name {
          font-size: 50px;
        }

        .info-top {
          display: flex;
          align-items: center;
          ::v-deep .svg-icon {
            font-size: 35px;
            margin-top: -19px;
          }

          .name {
            // ::v-deep .n-form-item .n-form-item-label {
            //   margin-left: 15px;
            // }

            ::v-deep .n-form-item .n-input {
              margin-left: -30px;
              width: 220px;
            }
          }
        }

        .info-down {
          margin-top: 20px;
          display: flex;
          ::v-deep .svg-icon {
            margin-top: 5px;
            margin-right: 5px;
          }
          ::v-deep .n-form-item .n-input {
            margin-left: -32px;
            width: 220px;
          }
        }
      }
    }
  }

  .content {
    margin-top: 180px;
    width: 100%;
    height: 20px;
    .content-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 120px;
      margin-bottom: 15px;
      .content-list-title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        background-color: #dcdcdc;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
  }
}
</style>
